<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI学术评审</title>
    <!-- 添加Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: PingFang, sans-serif;
            background-color: #E8EAFA;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        .header {
            background: #1F3991;
            height: 80px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        h1 {
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .main-container {
            display: flex;
            width: 100%;
            min-height: calc(100vh - 100px);
            margin-top: 20px;
            height: 90vh;
        }

        .left-column {
            flex: 1;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 10px 20px 20px;
            overflow-y: auto; /* 当内容超出时显示纵向滚动条 */
            position: sticky; /* 粘性定位 */
            top: 0; /* 顶部固定 */
        }

        .middle-column {
            flex: 3;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 10px 20px 10px;
            overflow-y: auto;
            position: relative;
        }

        .right-column {
            flex: 2;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 20px 20px 10px;
            display: flex;
            flex-direction: column;
            position: sticky; /* 粘性定位 */
            top: 0; /* 顶部固定 */
            overflow-y: auto; /* 当内容超出时显示纵向滚动条 */
        }

        input[type="text"] {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            background-color: #1F3991;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }

        button:hover {
            background-color: #1F3991;
        }

        iframe {
            width: 100%;
            flex-grow: 1;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #review {
            text-align: left;
        }

        #progressDiv {
            margin-top: 20px;
            display: none;
        }

        .progressLabel {
            vertical-align: middle;
            margin-right: 10px;
            display: inline-block;
        }

        #progressBar {
            width: 100%;
            background-color: #ddd;
            display: inline-block;
            vertical-align: middle;
            margin-top: 5px;
        }

        #progress {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }

        #pageImg {
            margin-top: 20px;
            max-width: 60%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        #check {
            width: 60%;
            align-items: center;
        }

        .column-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #1F3991;
            padding-bottom: 5px;
        }

        /* 添加图标样式 */
        .column-title i {
            margin-right: 8px;
            color: #1F3991;
        }

        .test-sample {
            margin-bottom: 15px;
        }

        /* 添加评审按钮的样式 */
        .review-button {
            width: 20% !important;
            margin: 15px auto !important;
            display: block !important;
        }

        /* 历史记录栏样式 */
        .history-section {
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        .history-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .history-item a {
            color: #1F3991;
            text-decoration: none;
            font-weight: 500;
        }

        .history-item a:hover {
            text-decoration: underline;
        }

        .history-date {
            color: #888;
            font-size: 0.85em;
        }
    </style>
    <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
</head>

<body>
    <div class="header">
        <h1>AI学术评审</h1>
    </div>

    <div class="main-container">
        <!-- 左侧列 (1份) - 上传区域 -->
        <div class="left-column">
            <div class="column-title"><i class="fas fa-upload"></i>上传论文</div>
            <form id="postForm" action="/" method="post">
                <input type="hidden" id="fileId" name="file_id" value="test">
            </form>

            <form id="uploadForm" enctype="multipart/form-data">
                <input id="uploadFile" name="file" type="file" accept=".pdf" placeholder="选择文件">
                <!-- <input type="text" name="url" placeholder="选择上传PDF或输入PDF的URL，如https://arxiv.org/pdf/2012.14660"> -->
                <input type="hidden" name="url" placeholder="选择上传PDF或输入PDF的URL">
                <!-- 隐藏的文件输入框 -->
                <!-- <input type="file" id="fileInput" name="file" accept=".pdf" style="display:none;"> -->
                <!-- 自定义样式按钮 -->
                <!-- <button type="button" onclick="document.getElementById('fileInput').click()">选择文件(PDF)</button> -->
                <button id="upload" type="submit">上传论文(PDF)</button>
                <!-- submit行为将通过JavaScript动态控制 -->
            </form>

            <p>
            <a href="#" onclick="document.getElementById('postForm').submit(); return false;">样例演示</a>
            <p>

            <div id="progressDiv">
                <span class="progressLabel">论文解析：</span>
                <div id="progressBar">
                    <div id="progress">0%</div>
                </div>
            </div>

            <!-- 添加历史记录栏 -->
            <div class="history-section">
                <div class="column-title">
                    <i class="fas fa-history"></i>历史记录
                    <button id="clearHistory" title="清除历史记录" style="float: right; background: none; color: #1F3991; width: auto; padding: 0 5px; margin: 0;">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                <ul class="history-list">
                    <li class="history-item"></li>
                    <!-- 历史记录项将通过JavaScript动态添加 -->
                </ul>
            </div>
        </div>

        <!-- 中间列 (3份) - 评审结果 -->
        <div class="middle-column">
            <div class="column-title"><i class="fas fa-clipboard-check"></i>评审结果</div>

            <div id="review">
                {% if file_id %}
                <div id="showPage">
                    <img id="pageImg" src="/page/{{ file_id }}" alt="论文首页图像">
                    <form id="reviewForm" action="/review" method="post">
                        <input type="hidden" name="file_id" value="{{ file_id }}">
                        <button type="submit" class="review-button">开始评审</button>
                    </form>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 右侧列 (2份) - PDF预览 -->
        <div class="right-column">
            <div class="column-title"><i class="fas fa-file-pdf"></i>PDF预览</div>
            {% if file_id %}
            <iframe id="pdfViewer" title="PDF文档预览" src="/pdf/{{ file_id }}"></iframe>
            {% endif %}
        </div>
    </div>

    <script>
        const uploadForm = document.getElementById('uploadForm');
        const progressDiv = document.getElementById('progressDiv');
        const progress = document.getElementById('progress');
        const postForm = document.getElementById('postForm');
        const reviewForm = document.getElementById('reviewForm');
        const reviewDiv = document.getElementById('review');

        // 历史记录管理
        function addToHistory(key) {
            // 获取当前日期
            const today = new Date();
            const dateStr = today.toISOString().split('T')[0];

            // 创建历史记录项
            const historyList = document.querySelector('.history-list');
            const historyItem = document.createElement('li');
            historyItem.className = 'history-item';
            historyItem.innerHTML = `
                <a href="#" onclick="postFileId('${key}'); return false;">${key}</a>
                <span class="history-date">${dateStr}</span>
            `;

            // 添加到列表顶部
            if (historyList.firstChild) {
                historyList.insertBefore(historyItem, historyList.firstChild);
            } else {
                historyList.appendChild(historyItem);
            }

            // 保存到本地存储
            saveHistoryToLocalStorage();
        }

        function postFileId(key) {
            document.getElementById('fileId').value=key;
            postForm.submit();
        }

        function saveHistoryToLocalStorage() {
            const historyItems = document.querySelectorAll('.history-item');
            const history = [];

            historyItems.forEach(item => {
                const link = item.querySelector('a');
                const date = item.querySelector('.history-date');

                if (link && date) {
                    history.push({
                        fileId: link.textContent,
                        date: date.textContent
                    });
                }
            });

            localStorage.setItem('fileHistory', JSON.stringify(history));
        }

        function loadHistoryFromLocalStorage() {
            const historyStr = localStorage.getItem('fileHistory');
            if (historyStr) {
                const history = JSON.parse(historyStr);
                const historyList = document.querySelector('.history-list');

                // 清空现有列表，保留第一个测试样例
                while (historyList.children.length > 1) {
                    historyList.removeChild(historyList.lastChild);
                }

                // 添加历史记录
                history.forEach(item => {
                    const historyItem = document.createElement('li');
                    historyItem.className = 'history-item';
                    historyItem.innerHTML = `
                        <a href="#" onclick="postFileId('${item.fileId}'); return false;">${item.fileId}</a>
                        <span class="history-date">${item.date}</span>
                    `;
                    historyList.appendChild(historyItem);
                });
            }
        }

        // 页面加载时从本地存储加载历史记录
        window.addEventListener('DOMContentLoaded', loadHistoryFromLocalStorage);

        // 添加清除历史记录功能
        document.getElementById('clearHistory').addEventListener('click', function() {
            if (confirm('确定要清除所有历史记录吗？')) {
                // 清除本地存储
                localStorage.removeItem('fileHistory');
                
                const historyList = document.querySelector('.history-list');
                while (historyList.children.length > 0) {
                    historyList.removeChild(historyList.lastChild);
                }
            }
        });          

        uploadForm.addEventListener('submit', function (e) {
            e.preventDefault();
            progressDiv.style.display = 'block';
            const formData = new FormData(this);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            let progressWidth = 0;
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    const response = JSON.parse(xhr.responseText);
                    progressWidth = 100;
                    progress.style.width = '100%';
                    if (xhr.status === 200) {
                        progress.textContent = '100%';
                        document.getElementById('fileId').value = response.file_id;
                        progressDiv.style.display = 'none';
                        
                        addToHistory(response.file_id);

                        postForm.submit();
                    } else {
                        progress.textContent = response.message;
                    }
                }
            };
            xhr.send(formData);

            const interval = setInterval(() => {
                if (progressWidth < 99) {
                    progressWidth++;
                    progress.style.width = `${progressWidth}%`;
                    progress.textContent = `${progressWidth}%`;
                } else {
                    clearInterval(interval);
                }
            }, 60000 / 99);
        });

        const fileId = "{{ file_id | default('', false) }}";
        if (fileId) {
            reviewForm.addEventListener('submit', function (event) {
                event.preventDefault();
                const formData = new FormData(reviewForm);
                const xhr = new XMLHttpRequest();
                xhr.open('POST', '/review', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 3) {
                        // 使用 marked 库将 Markdown 转换为 HTML
                        const markdownText = xhr.responseText;
                        const html = marked.marked(markdownText);
                        reviewDiv.innerHTML = html;
                    }
                };
                const params = new URLSearchParams(formData).toString();
                xhr.send(params);
            });
        }
    </script>
</body>

</html>
